<template>
  <div class="page-container">
    <!--表格内容栏-->
    <ac-table
      ref="dataTable" 
      pkName="id" 
      :filters="filters"  
      :filterFields="filterFields"
      :columns="columns" 
      :defaultSort="defaultSort" 
      :opMinWidth="100"
      @handleTableOperator="handleTableOperator" 
      @handleCellOperator="handleCellOperator"
    >
    </ac-table>

    <ac-bpmn
      v-if="showBpmnDealBox"
      v-model="showBpmnDealBox"
      :options="bpmnOptions"
    ></ac-bpmn>
  </div>
</template>

<script>
export default {
  data() {
    return {
      size: 'small',
      
      filters: {
        title: '',
        flowName: ''
      }, // 分页查询条件
      filterFields: [
        { prop: "dealStatus", label: "状态", type: 'button', dicCode: 'dicFlowDealStatus' },
        { prop: "title", label: "流程标题/名称" },
      ],
      columns: [
        {prop: "title", label: "流程标题", minWidth: 180, click: true},
        {prop: "flowName", label: "流程名称", minWidth: 140, sortable: false},
        {prop: "currFlowNodeNames", label: "节点名称", minWidth: 140},
        {prop: "startTime", label: "开始时间", width: 160},
        {prop: "currManNames", label: "待办人", width: 100},
        {prop: "currOrgNames", label: "待办部门", width: 120},
        {prop: "dealStatus", label: "状态", minWidth: 100, dicCode: 'dicFlowDealStatus'},
        {prop: "endTime", label: "结束时间", width: 160},
        {prop: "createTime", label: "创建时间", width: 160}
      ], // 分页列表字段
      defaultSort: {}, // 分页排序

      showBpmnDealBox: false,
      bpmnOptions: {},
    }
  },
  methods: {
    // 单元格操作
    handleCellOperator: function(property, value, row) {
      this.bpmnOptions = { flowInstId: row.id };
      this.showBpmnDealBox = true;
    },
    // 显示操作界面
    handleTableOperator: function(button, row) {
      if (button.buttonType === 'dealFlow') {
        this.$router.push({path: "/bpmn/bpmnDeal", query: {instNodeId: row.instNodeId}});
      }
    },
  }
}
</script>

<style scoped>
</style>